﻿//--------------------------------------------------------------
// author zhangwei on 2015.08.09
// - Released version v1. This version uses vue.js. 
//   This version can be a good template for displaying a readonly object list.
//
// modified by zhangwei on 2015.08.10
// - Add editItem(item) and removeItem(item)
//
// Reference
// - TODOMVC using vue, https://github.com/tastejs/todomvc/blob/master/examples/vue/js/app.js;
//--------------------------------------------------------------

var tableConf = {
    //isShowHead : false,
    //isShowFoot : false,
    isCheckable : true,
    columns : [
        {'field':'name', 'isSortable':true, 'textAlign':'center', 'textAlign2':'left'},
        'math',
        'chinese',
        {'field':'english', 'text':'英语', 'textAlign2':'center','isSortable':true},
        'operate'
    ],
    onPagerChange : function (num){
        getData(num)
    },
    onSortChange : function (field, dir){
        console.log(field)
        console.log(dir)
    },
    showItem : function (num){
        alert(num)
    },
	/*
		removeItem: function (item) {
			alert("remove Item " + item);
			console.log("remove Item " + item);
			//this.todos.$remove(item);
		},

		editItem: function (item) {
			alert("edit Item " + item);
			console.log("edit Item " + item);
			// this.beforeEditCache = item.title;
			// this.editedTodo = item;
		},		
		*/
	
    data : []
}

function _getData(pagerNum){
    var myTable = VueUI.getComponent('myTable')

    var data = []
    for (var i=0; i<10; i++){
        data.push(
            {
                name:pagerNum+'_张三'+i,
                math:98,
                chinese:90,
                english:95,
                operate:'<a href="javascript:;" v-on="click:showItem(\'' + 98 +'\')">详情</a> | <a href="javascript:;" v-on="click:x.editItem(item)">编辑</a> | <button class="destroy" v-on="click: removeTodo(todo)"></button>' 
            }
        )
    }
    VueUI.resetArray(tableConf.data, data)
    myTable.totalPage = 10
    myTable.totalCount = 234
    myTable.onPagerChange = function (num){
        getData(num)
        console.log(pagerNum + '_' + num)
    }
}

function getData(pagerNum){
    setTimeout(function (){
        _getData(pagerNum)
    }, 100)
}

x = new Vue({
    el : '#tableTest',
	
    data : {
        tableConf : tableConf,
        arr : []
    },
	
    methods : {
        getData : function (){
            getData(1)
        },
		
        clearData : function (){
            var myTable = VueUI.getComponent('myTable')
            VueUI.resetArray(tableConf.data, [])
            //tableConf.data = []
            //tableConf.data = []
            //myTable.data = []
            myTable.totalPage = 0
            myTable.totalCount = 0
        },
		
		removeItem: function (item) {
			alert("remove Item " + item);
			console.log("remove Item " + item);
			//this.todos.$remove(item);
		},

		editItem: function (item) {
			alert("edit Item " + item);
			console.log("edit Item " + item);
			// this.beforeEditCache = item.title;
			// this.editedTodo = item;
		},		
		
    }
})

getData(1)